<template>
    <view class="user_info">
      <view class="user_flex">
        <image class="user_avatar"
          src="https://p1.music.126.net/wSMfGvFzOAYRU_yVIfquAA==/2946691248081599.jpg?param=300y300"></image>
        <image class="user_level" src="/static/icon/vip_2.png"></image>
      </view>
      <view class="user_flex user_text">
        <view class="user_name">张三</view>
        <view class="user_vip_time">2099-12-31到期</view>
      </view>
      <view class="user_flex_2">
        <view>
          <image src="/static/icon/diamond.png"></image>
          123123
        </view>
        <view>
          <image src="/static/icon/coin.png"></image>
          123123
        </view>
      </view>
    </view>
</template>

<script setup></script>

<style scoped>
.user_info {
  width: calc(96% - 20rpx);
  padding: 26rpx 10rpx;
  background: #140441;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* margin-top: 20rpx; */
  margin: 10rpx auto;
  border-radius: 10rpx;
  position: sticky;
  top: 88rpx;
  z-index: 99;

  .user_flex {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-left: 10rpx;

    .user_avatar {
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      margin-right: 10rpx;
    }

    .user_level {
      width: 100rpx;
      height: 28rpx;
      position: absolute;
      bottom: 0;
      left: -6rpx;
    }

    .user_name {
      color: #fff;
      font-size: 30rpx;
      margin-bottom: 5rpx;
    }

    .user_vip_time {
      color: #777;
      font-size: 23rpx;
    }
  }

  .user_text {
    margin-top: 16rpx;
  }

  .user_flex_2 {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    font-size: 26rpx;

    view {
      transform: scale(0.9);
      transform-origin: right;
      display: flex;
      justify-self: center;
      align-items: center;
      background: #ffffff74;
      padding: 4rpx 10rpx;
      border-radius: 8rpx;
    }

    image {
      width: 26rpx;
      height: 26rpx;
      margin-right: 4rpx;

    }
  }
}
</style>